<template>
	<view>
		<view style="background-color: white; width: 100%;height: var(--status-bar-height);">
		            <!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar color="#000" left-icon="left" @clickLeft="navBack()" title="修改我的实验"/>
		
		
		<!-- <view class="title_box">
			<uni-icons type="forward"></uni-icons>
			<text>step.1 总体把握</text>
		</view> -->
		<view class="title_box">
			<image class="image_5" style="float :left; margin-right: 10px; width: 20px; height: 20px;" src="../../static/images/0d432bf50adced99be0d726890c0d4ec.png" />
			<text>总体把握</text>
		</view>
		
		<view class="envir_box">
			<view class="head_block">
				<view class="flex_1">
					<text class="text-gray">实验总时长</text>
					<text v-if="expertotaltime!=''" class="text_green">{{expertotaltime}}分钟</text>
					<text v-else class="text_green">{{expertotaltime||'暂未设置'}}</text>
				</view>
				<view class="flex_1">
					<text class="text-gray">节点数</text>
					<text class="text_green">{{experdot||'暂未设置'}}</text>
				</view>
			</view>
			<view style="display: flex; margin-bottom: 10upx;">
				<text class="text-gray" style="padding-left: 10upx;">实验名称</text>
				<input class="inputname" v-model="expername" maxlength="11"/>
			</view>
			<view style="display: flex;">
				<text class="text-gray" style="padding-left: 10upx;">实验简介</text>
				<textarea class="inputins"  v-model="experins"></textarea>
			</view>
		</view>
		
		<view class="title_box" v-if="showstep2">
			<!-- <uni-icons type="forward"></uni-icons> -->
			<image class="image_5" style="float :left; margin-right: 10px; width: 20px; height: 20px;" src="../../static/images/0d432bf50adced99be0d726890c0d4ec.png" />
			<text>数据修改</text>
			<text class="right1" @click="setinfo()" v-if="showset">修改</text>
			<text class="right2" @click="saveinfo()" v-if="!showset">保存</text>
		</view>
		
		<!-- <uni-section class="mb-10" title="阶段数据详表" type="line" v-if="showchart"></uni-section> -->
		<view class="flex-row items-center space-x-20 section">
		  <view class="section_11"></view>
		  <text class="text_10">阶段数据详表</text>
		</view>
		
		<view class="infocard_box" v-if="showstep2">
			
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="200rpx"><view class="table_th">节点</view></uni-th>
					<uni-th align="center" width="170rpx"><view class="table_th">时间点(分钟)</view></uni-th>
					<uni-th align="center" width="180rpx"><view class="table_th">温度(℃)</view></uni-th>
					<uni-th v-if="!showset" align="center" width="150rpx"><view class="table_th">操作</view></uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item,index in temporary">
					<uni-td>
						节点{{index+1}}
					</uni-td>
					<uni-td>
						<input :disabled="showset" v-model="temporary[index].time"/>
					</uni-td>
					<uni-td>
						<input :disabled="showset" v-model="temporary[index].temp"/>
					</uni-td>
					<uni-td v-if="!showset">
						<view class="table_tag" v-if="index>=2">
							<uni-tag text="删除" type="error" @click="deletedot(index)"></uni-tag>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			
			<button v-if="!showset" class="table-button" @click="adddot()">增加节点+</button>
		</view>
		
		
		<!-- <view class="title_box" v-if="showchart">
			<uni-icons type="forward"></uni-icons>
			<text>step.3 温度曲线</text>
		</view> -->
		<view class="title_box" v-if="showchart">
			<!-- <uni-icons type="forward"></uni-icons> -->
			<image class="image_5" style="float :left; margin-right: 10px; width: 20px; height: 20px;" src="../../static/images/0d432bf50adced99be0d726890c0d4ec.png" />
			<text>温度曲线</text>
		</view>
		
		<!-- <uni-section class="mb-10" title="预期温度曲线图 (℃-分钟)" type="line" v-if="showchart"></uni-section> -->
		<view class="flex-row items-center space-x-20 section">
		  <view class="section_11"></view>
		  <text class="text_10">预期温度曲线图（摄氏度-分钟）</text>
		</view>
		<view class="charts-box" v-if="showchart">
			<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1"></qiun-data-charts>
		</view>
		
	
		
		<view class="tip_box" v-if="showtip">
			<view class="tip" v-for="item,index in temporary_ins">
				<view v-if="temporary_ins[index].speed > 1000 || temporary_ins[index].speed < -1000">
					<view class="text-gray">警告{{index+1}}</view>
					<text class="error">节点{{index+1}}到节点{{index+2}}之间温度变化速率过快，达到了</text>
					<text class="errorbond">{{item.speed}} ℃/小时</text>
					<text class="error">，该设备最高温度变化速率为 ±1000 ℃/小时，请修改！</text>
				</view>
			</view>
		</view>
		
		
		<view class="button_box">
			<button @click="saveMyexper()" v-if="(!showtip) && showchart">保存</button>
		</view>
		
	</view>
</template>

<script>
	import SeniorTable from "@/components/data-table/senior-table.vue"
	import {_updatemyexper} from '@/service/myexper_api.js'
	export default {
		components:{
			SeniorTable
		},
		data() {
			return {
				
				showplusmenu:false,
				expertotaltime:'',
				experdot:'',
				showtip:false,
				expername:'',
				experins:'',
				experid:'',
				experequipname:'',
				usernum:'',
				
				//卡片数据
				showset:true,
				showstep2:false,
				temporary_ins:[
					{
						speed:0,
						ins:'暂无',
						phase:'暂无'
					}
				],
				temporary:[
					{
						time:0,
						temp:0
					}
				],
				
				//曲线图
				showchart:false,
				chartData1: {},
				opts1: {
					color: ["#138f87","#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					legend: {},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true
					  }
					}
				},
				
				
			}
		},
		onLoad() {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					this.usernum = value.accountNum;
				}
			} catch (e) {
				console.error(e);
			}
			
			try {
				const value = uni.getStorageSync('changemyexperdata');
				if (value) {
					this.expertotaltime = value.expertotaltime
					this.experdot = value.experdot
					this.expername = value.expername
					this.experins = value.experins
					this.experid = value.experid
					this.experequipname = value.experequipname
					this.temporary = value.details.temporary
					this.temporary_ins = value.details.temporary_ins
					this.showstep2 = true
					setTimeout(() => {
					      self.setDataForchart();
					    }, 500);
				}
			} catch (e) {
				console.error(e);
			}
			
		},
		methods: {
			// 遮罩层
			zzc() {
				this.showplusmenu = false;
			},
			clickrighticon(){
				this.showplusmenu = ! this.showplusmenu;
			},
			setinfo(){
				this.showset = !this.showset
			},
			saveinfo(){
				this.showset = !this.showset
				this.setDataForchart()
				this.setSpeed()
			},
			setSpeed(){
				this.showtip = false;
				this.temporary_ins = [];
				for (let i=0; i<this.experdot-1; i++){
					this.temporary_ins.push({
						phase:'阶段'+(i+1),
						ins:'',
						longtime:this.temporary[i+1].time-this.temporary[i].time,
						speed:Number((((this.temporary[i+1].temp-this.temporary[i].temp) /(this.temporary[i+1].time-this.temporary[i].time)) * 60).toFixed(2))
					})
				}
				
				for (let i=0; i<this.temporary_ins.length; i++){
					if (this.temporary_ins[i].speed >1000 || this.temporary_ins[i].speed<-1000){
						this.showtip = true;
					}
				}
			},
			setDataForchart(){
				var categories = [];
				var data = [];
				
				if(this.temporary){
				for (var i=0;i<this.temporary.length; i++){
					categories.push(this.temporary[i].time)
					data.push(this.temporary[i].temp)
				}
				}
				
				var series = [];
				series.push({
					name:"预期工作温度",
					data
				})
				let res1 = {
					categories,
					series
				}
				this.chartData1 = JSON.parse(JSON.stringify(res1));
				this.showchart = true
			},
			adddot(){
				for (let i=0; i<this.temporary.length; i++){
					this.temporary[i].time = parseInt(this.temporary[i].time)
					this.temporary[i].temp = parseInt(this.temporary[i].temp)
				}
				
				this.expertotaltime = this.temporary[this.temporary.length-1].time;
				this.temporary.push({
					time:this.temporary[this.experdot-1].time+10,
					temp:this.temporary[this.experdot-1].temp
				})
				
				this.temporary_ins.push({
					phase:'阶段'+(this.experdot),
					ins:'',
					speed:0,
					longtime:10
				})
				this.experdot++
				this.expertotaltime = this.expertotaltime+10
				console.log(this.expertotaltime);
			},
			deletedot(index){
				this.experdot--;
				this.temporary.splice(index,1);
				this.expertotaltime = this.temporary[this.temporary.length-1].time;
				console.log(this.temporary)
			},
			navBack(){
				uni.navigateBack({
				})
			},
			async saveMyexper(){
				console.log("保存！！");
				if (this.expername == ''){
					this.$api.msg('实验名称不能为空！');
				}else{
					
					let details = {
						total_time:this.expertotaltime,
						temporary:this.temporary,
						temporary_ins:this.temporary_ins
					}
					let data = {
						id:this.experid,
						name_exper:this.expername,
						num_user:this.usernum,
						time_exper:this.expertotaltime,
						equip_exper:this.experequipname,
						ins_exper:this.experins,
						num_node:this.experdot,
						details
					}
					
					let res = await _updatemyexper(data)
					if (res.flag == true){
						this.navBack()
					}
					
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		// background: $page-color-base;
	}
	
	// 遮罩层
	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background-color: #000;
	}
	
	.envir_box{
		background-color: white;
		margin-top: 20upx;
		margin-left: 10upx;
		margin-right: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		padding-top: 1upx;
		padding-bottom: 10upx;
		box-sizing: border-box;
		width: 730upx;
		border-radius: 20upx;
		box-shadow: 0px 4.17rpx 8.33rpx #00000040;
	}
	
	.text-gray {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.head_block {
		padding: 10upx;
		margin-top: 10rpx;
		display: flex;
		.flex_1 {
			flex: 1;
		}
		.text_red {
			padding-left: 10rpx;
			color: #d53f4e;
		}
		.text_blue {
			padding-left: 10rpx;
			color: #267cb9;
		}
		.text_green {
			padding-left: 10rpx;
			color: #138f87;
		}
	}
	
	
	.plusmenu{
		z-index: 1;
		position: absolute;
		right: 0;
		background-color: white;
		width: 250rpx;
		border-radius: 20upx;
		padding: 10rpx;
		.menulist{
			font-size: 33.3rpx;
			text-align: center;
			padding-left:10rpx;
			padding-right:10rpx;
			.text{
				padding-bottom: 15rpx;
				padding-top: 15rpx;
			}
			.line{
				height: 2rpx;
				background-color: #999;
			}
		}
	}
	
	.title_box{
		margin-top: 20upx;
		margin-left: 10upx;
		margin-right: 10upx;
		padding-left: 20upx;
		padding-top: 1upx;
		width: 730upx;
		.right1{
			padding-left: 440upx;
			font-weight: 100;
			text-decoration: underline;
		}
		.right2{
			padding-left: 440upx;
			font-weight: 100;
			color: #138f87;
		}
	}
	
	.bottom_popup_box{
		padding: 20upx;
		background-color: white;
		border-radius: 20upx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.uni-padding-wrap{
		display: flex;
		.save{
			position: absolute;
			right: 0;
			padding-right: 50upx;
			color: #267cb9;
		}
	}
	
	.mb-10 {
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		text{
			color: #999;
		}
	}
	.charts-box {
		background: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		
	    width: 730rpx;
	}
	.table{
		padding-left: 10upx;
		padding-right: 10upx;
	}
	.infocard_box{
		background-color: white;
		margin-left: 10upx;
		margin-right: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		
		width: 730upx;
	}
	
	.example-body{
		display: flex;
		margin-left: 150upx;
		.tag-view{
			padding-left: 10upx;
		}
	}
	
	.cardtext{
		font-size: 31rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.tip_box{
		background-color: white;
		margin-top: 20upx;
		margin-left: 10upx;
		margin-right: 10upx;
		margin-bottom: 30upx;
		border-radius: 20upx;
		padding: 20upx;
		.tip{
			.error{
				color: #d53f4e;
				font-weight: 100;
				padding-left: 30upx;
			}
			.errorbond{
				color: #d53f4e;
				font-weight: bond;
				padding-left: 30upx;
			}
		}
	}
	
	.button_box{
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 50rpx;
		margin-bottom: 50upx;
		button{
			width: 400rpx;
			background-color: #138f87;
			color: #fff;
			border-radius: 50upx;
			font-size: 33upx;
			height: 80upx;
			padding-left: 50upx;
			padding-right: 50upx;
		}
	}
	
	.inputins{
		margin-left: 10upx;
		margin-right: 10upx;
		padding: 10upx;
		width: 380upx;
		height: 110upx;
		border-radius: 10upx;
		background-color: #e5e5e5;
	}
	.inputname{
		margin-left: 10upx;
		margin-right: 10upx;
		padding-left: 10upx;
		background-color:  #e5e5e5;
		border-radius: 10upx;
		width: 300rpx;
		height: 60rpx;
	}
	
	.table_tag{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.table_th{
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.table-button{
		font-size: 33upx;
		background-color: #138f87;
		color: white;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 300rpx;
		margin-top: 30rpx;
	}
	
	.uni-table-th{
	    background-color: #138f87;
	}
	.section_11 {
	  background-color: #138f87;
	  border-radius: 14.58rpx;
	  width: 8.33rpx;
	  height: 29.42rpx;
	  margin-top: 20rpx;
	  margin-right: 20rpx;
	  margin-bottom: 20rpx;
	}
	.text_10 {
	  color: #000000;
	  font-size: 29.33rpx;
	  font-family: WenQuanYiMicroHeiMono;
	  line-height: 22.29rpx;
	  margin-top: 20rpx;
	  margin-bottom: 20rpx;
	}
	.section{
		margin-left: 30rpx;
	}
</style>
